import React, { Component } from 'react';
import { View, Text, Image, Navigator, StyleSheet } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
// import { Navigator } from 'react-native-deprecated-custom-components'

import Boy from './Boy.js'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: 'tab_popular'
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    initialRoute={{
                        component: Boy
                    }}
                    renderScene={(route, navigator) => {
                        let Component = route.component
                        return <Component navigator={navigator} {...route.params} />
                    }}
                >

                </Navigator>
                {/* <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab_popular'}
                        selectedTitleStyle={{ color: '#EA4C4C'}}
                        title="最热"
                        renderIcon={() => <Image style={styles.image} source={require('../assets/img/ic_polular.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#EA4C4C'}]} source={require('../assets/img/ic_polular.png')} />}
                        badgeText="1"
                        onPress={() => this.setState({ selectedTab: 'tab_popular' })}>
                        <View style={[styles.page, styles.page1]}>
                            <Text>App</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab_trending'}
                        selectedTitleStyle={{ color: '#EA4C4C' }}
                        title="趋势"
                    renderIcon={() => <Image style={styles.image} source={require('../assets/img/ic_trending.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.image, { tintColor: '#EA4C4C' }]} source={require('../assets/img/ic_trending.png')} />}
                        onPress={() => this.setState({ selectedTab: 'tab_trending' })}>
                        <View style={[styles.page, styles.page2]}></View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab_favorite'}
                        selectedTitleStyle={{ color: '#EA4C4C' }}
                        title="收藏"
                        renderIcon={() => <Image style={styles.image} source={require('../assets/img/ic_trending.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.image, { tintColor: '#EA4C4C' }]} source={require('../assets/img/ic_trending.png')} />}
                        onPress={() => this.setState({ selectedTab: 'tab_favorite' })}>
                        <View style={[styles.page, styles.page2]}></View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab_my'}
                        selectedTitleStyle={{ color: '#EA4C4C' }}
                        title="我的"
                        renderIcon={() => <Image style={styles.image} source={require('../assets/img/ic_trending.png')} />}
                        renderSelectedIcon={() => <Image style={[styles.image, { tintColor: '#EA4C4C' }]} source={require('../assets/img/ic_trending.png')} />}
                        onPress={() => this.setState({ selectedTab: 'tab_my' })}>
                        <View style={[styles.page, styles.page2]}></View>
                    </TabNavigator.Item>
                </TabNavigator> */}
                
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#efefef'
    },
    page: {
        flex: 1
    },
    page1: {
        backgroundColor: '#7BCECC'
    },
    page2: {
        backgroundColor: '#FEF8E6'
    },
    image: {
        width: 22,
        height: 22
    }
})